function $(id) {
	return document.getElementById(id);
}
var ctx = $('cav1').getContext('2d');
var ctx2 = $('cav2').getContext('2d');
var bg = new Image;
var fish = new Image;
var fish2 = new Image;
var fish3 = new Image;
var fish4 = new Image;
var creelimg = new Image;
fish.src = "../img/鱼动画.png";
console.log(fish);
fish2.src = "../img/鱼动画2.png";
fish3.src = "../img/鱼动画3.png";
fish4.src = "../img/鱼动画4.png";
bg.src = "../img/海底.png";
creelimg.src = "../img/竹篮.png"

var caughtFish;
var ishit;
var indexFish;
var nowX, nowY; //记录当前鼠标位置
var total_points = 0;
var timer; //倒计时
var timerinter;
var timeflg = false;

window.onload = function() {
	// console.log(ctx2);
	ctx.drawImage(bg, 0, 0);
	var fishobj = [];
	var creelobj = new Creel(creelimg, 650, 75);
	var scoreobj = new ShowText(cav2.width / 2 - 23, 60, '40px Georgia');
	var add_socreobj = new ShowText2(cav2.width / 2 - 15, 30, '20px Georgia');
	var downtimeobj = new ShowTime(10, 40, '20px 黑体', 30);

	function swimall() {
		cav2.width = cav2.width;
		creelobj.draw();
		scoreobj.draw();
		add_socreobj.draw();
		downtimeobj.draw();
		for (var i = 0; i < fishobj.length; i++) {
			fishobj[i].swim(ctx2);
		}
		timer = window.requestAnimationFrame(swimall);
		if (timeflg == true) {
			ctx2.fillText("游戏结束!", cav2.width / 2 - 36, 100);
			window.cancelAnimationFrame(timer);
		}
	}

	// 事件绑定
	begingame.onclick = function() {
		//隐藏开始按钮

		begingame.style.display = "none";

		/* 	鱼类
			参数
			Image--图片,x--图片宽,y--图片高,pY--起始y值,A--幅值,w--频率,s--鱼速度,m--鱼比例 */
		fishobj.push(new Fishdraw(fish, fish.width, fish.height / 4, 200, 10, 20, 1.5, 0.3, 10));
		fishobj.push(new Fishdraw(fish2, fish2.width, fish2.height / 4 + 1, 170, 50, 10, 1, 0.5, 20));
		fishobj.push(new Fishdraw(fish3, fish3.width, fish3.height / 4, 250, 20, 10, 3, 0.3, 25));
		fishobj.push(new Fishdraw(fish4, fish4.width, fish4.height / 4 + 1, 200, 60, 15, 2.0, 0.5, 15));
		swimall();

		timerinter = setInterval(function createfish() {
			downtimeobj.dowmtime();
			if (fishobj.length < 40) {
				var flg = Math.floor(Math.random() * 4);
				switch (flg) {
					case 0:
						fishobj.push(new Fishdraw(fish, fish.width, fish.height / 4, 150 + Math.random() * 80, 10, 20, 1.5, 0.3, 10));
						break;
					case 1:
						fishobj.push(new Fishdraw(fish2, fish2.width, fish2.height / 4 + 1, 150 + Math.random() * 60, 50, 10, 1, 0.5,
							20));
						break;
					case 2:
						if (Math.random() > 0.5)
							fishobj.push(new Fishdraw(fish3, fish3.width, fish3.height / 4, 180 + Math.random() * 90, Math.random() *
								40, 10, 3.5, 0.3, 25));
						break;
					case 3:
						fishobj.push(new Fishdraw(fish4, fish4.width, fish4.height / 4 + 1, 180 + Math.random() * 60, 60, 15, 2.0,
							0.5, 15));
						break;
				}
				console.log("create");
			}
			if (timeflg == true) {
				clearInterval(timerinter);
				againgame.style.display = "block";
			}
		}, 1000)

	}


	cav2.onmousedown = function(e) {
		for (var i = 0; i < fishobj.length; i++) {
			if (fishobj[i].pos(e.offsetX, e.offsetY)) {
				// console.log("hit!");
				indexFish = i;
				caughtFish = fishobj[i];
				nowX = e.offsetX;
				nowY = e.offsetY;
				ishit = true;
			}
		}
		if (ishit) {
			caughtFish.isCaught = true;
			// console.log(caughtFish.score);
		}
	}
	cav2.onmousemove = function(e) {
		if (ishit) {
			caughtFish.movefish(e.offsetX - nowX + caughtFish.oX,
				e.offsetY - nowY + caughtFish.oY);

			nowX = e.offsetX;
			nowY = e.offsetY;
			// if (creelobj.pos(caughtFish)) {
			// 	creelobj.mhit = true;
			// }
		}
	}
	cav2.onmouseup = function(e) {
		if (ishit) {
			if (creelobj.pos(caughtFish)) {
				creelobj.mhit = true;
				add_socreobj.text = caughtFish.score;
				total_points += caughtFish.score;
				fishobj.splice(indexFish, 1);
			} else {
				caughtFish.isCaught = false;
				caughtFish.d = (caughtFish.oX + caughtFish.x) / caughtFish.s;
				caughtFish.r = 0;
				caughtFish.frm = 0;
			}
		}
		caughtFish = null;
		ishit = false;
	}
	// 重新游戏
	againgame.onclick = function() {
		window.location.reload();
	}
	// 事件结束
}




/*
	各类抽象类定义==================
  */

/* 总分数
	参数：位置x,y,以及文本样式
 */
function ShowText(x, y, fonts) {
	this.x = x;
	this.y = y;
	this.font = fonts;
	this.d = 0;

	this.draw = function() {
		ctx2.font = this.font;
		ctx2.fillStyle = 'red';
		ctx2.fillText(total_points, this.x, this.y);
	}

}
/* 增加分数 
	参数：位置x,y,以及文本样式
*/
function ShowText2(x, y, fonts) {
	this.x = x;
	this.y = y;
	this.font = fonts;
	this.d = 0;
	this.tras = 90;
	this.text = null;
	this.tempY = y;

	this.draw = function() {
		if (this.text == null) {

		} else {
			ctx2.font = this.font;
			ctx2.fillStyle = '#ff1861' + this.tras;
			this.tras -= 10;
			this.tempY--;
			ctx2.fillText("+" + this.text, this.x, this.tempY);
			if (this.tempY < 10) {
				this.tempY = this.y;
				this.tras = 90;
				this.text = null;
			}
		}
	}

}
/* 倒计时 */
function ShowTime(x, y, fonts, t) {
	this.x = x;
	this.y = y;
	this.font = fonts;
	this.d = 0;
	this.t = t;
	this.draw = function() {
		ctx2.font = this.font;
		ctx2.fillStyle = 'blue';
		ctx2.fillText("倒计时: " + this.t, this.x, this.y);
		if (this.t == 0) {
			timeflg = true;
		}
	}
	this.dowmtime = function() {
		this.t--;
	}
}

/*  篮子 
	参数：图片,其实x轴位置,其实y轴位置
*/
function Creel(Image, x, y) {
	this.img = Image;
	this.x = x;
	this.y = y;
	this.w = Image.width;
	this.h = Image.height * 2;
	this.mhit = false;
	this.d = 0;
}
Creel.prototype.draw = function() {
	if (!this.mhit) {
		if (this.d > 0) {
			this.d -= 0.5;
			ctx2.drawImage(this.img, this.x - this.d, this.y, this.w + this.d * 2, this.h);
			// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
		} else {
			ctx2.drawImage(this.img, this.x, this.y, this.w, this.h);
			// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
		}
	} else {
		this.d += 0.5;
		ctx2.drawImage(this.img, this.x - this.d, this.y, this.w + this.d * 2, this.h);
		// ctx2.strokeRect( this.x - this.d, this.y,this.w + this.d * 2, this.h);
		if (this.d > 10) {
			this.mhit = false;
		}
	}
}
//碰撞检测
Creel.prototype.pos = function(obj) {
	// 通过起始位置判断先后关系，后通过最大长度判断是否相交
	var compXY = [
		Math.max(obj.oX, this.x),
		Math.min((obj.oX + obj.x * obj.m), this.x + this.w),
		Math.max(obj.oY, this.y),
		Math.min((obj.oY + obj.y * obj.m), this.y + this.h)
	]
	// 【0】【2】为相交点左上角
	if ((compXY[0] < compXY[1]) && (compXY[2] < compXY[3])) {
		if ((compXY[0] < compXY[1]) && (compXY[2] < compXY[3])) {
			var dataimg = ctx2.getImageData(compXY[0], compXY[2], compXY[1] - compXY[0], compXY[3] - compXY[2]).data;
			for (var i = 3; i < dataimg.length; i += 4) {
				console.log(dataimg);
				if (dataimg[i] > 0) return true;
			}
		}
	} else {
		return false;
	}

	// return (compXY[0] < compXY[1]) && (compXY[2] < compXY[3]);
}






/* 	鱼类
	参数：
	Image--图片,x--图片宽,y--图片高,pY--起始y值,A--幅值,w--频率,s--鱼速度,m--鱼比例 
*/
function Fishdraw(Image, x, y, pY, A, w, s, m, score) {
	//
	this.Image = Image;
	this.x = x;
	this.y = y;
	this.A = A;
	this.w = w;
	this.s = s;
	this.m = m;
	this.score = score;

	this.flg = true;
	this.pY = pY;
	this.d = 0;
	this.frm = 0;
	this.frame = [];
	// this.newY;
	// y角度
	this.r = 0;
	this.swim;

	// 鱼当前位置 以及被抓标志
	this.oX = this.d * this.s - this.x;
	this.oY = pY;
	this.isCaught = false;

	//存帧函数
	this.cut = function() {
		for (var i = 0; i < 4; i++) {
			var cav = document.createElement('canvas');
			cav.width = this.x;
			cav.height = this.y;
			var cont = cav.getContext("2d");
			cont.drawImage(this.Image, 0, i * this.y, this.x, this.y, 0, 0, this.x, this.y);
			this.frame[i] = cav;
		}
	};
	this.cut();
}
// 鱼游动函数
Fishdraw.prototype.swim = function(ctx) {
	ctx.save();
	ctx.translate(this.oX, this.oY);
	ctx.drawImage(this.frame[this.frm], 0, 0, this.x, this.y,
		0, 0, this.x * this.m, this.y * this.m);

	// ctx.strokeRect(0,0,this.x * this.m, this.y * this.m);
	if (!this.isCaught) {
		this.d++;
		this.oX = this.d * this.s - this.x;

		if (Math.floor(this.d % 10) == 0) {
			this.r++;
			this.frm++;
			this.oY = this.pY + this.A * Math.sin(this.w * this.r * Math.PI / 180);
			// console.log(this.d);
		}

		if (this.frm >= 4) this.frm = 0;

		if (this.d * this.s > 800 + this.x) {
			this.d = 0;
		}
	}
	ctx.restore();

}
//判断鱼位置函数
Fishdraw.prototype.pos = function(x, y) {
	var boolX = x >= this.oX && x <= (this.oX + this.x * this.m);
	var boolY = y >= this.oY && y <= (this.oY + this.y * this.m);
	return boolX && boolY;
	// this.oX=
}
Fishdraw.prototype.movefish = function(x, y) {
	this.oX = x;
	this.oY = y;

}
